<template>
  <view class="profile">
    <!-- 基本信息设置 -->
    <view class="settings-section">
      <view class="section-title">基本信息设置</view>
      
      <!-- 薪资设置 -->
      <view class="setting-item">
        <view class="item-label">薪资类型</view>
        <picker 
          mode="selector" 
          :range="salaryTypes" 
          :value="workSettings.salary.type === 'monthly' ? 0 : 1"
          @change="onSalaryTypeChange"
        >
          <view class="picker-value">
            {{ workSettings.salary.type === 'monthly' ? '月薪' : '时薪' }}
            <text class="picker-arrow">></text>
          </view>
        </picker>
      </view>
      
      <view class="setting-item">
        <view class="item-label">{{ workSettings.salary.type === 'monthly' ? '月薪' : '时薪' }}金额</view>
        <input 
          type="digit" 
          :value="String(workSettings.salary.amount)"
          @input="onSalaryAmountChange"
          placeholder="请输入金额"
          class="salary-input"
        />
      </view>

      <!-- 工作时间设置 -->
      <view class="setting-item">
        <view class="item-label">上班时间</view>
        <picker 
          mode="time" 
          :value="workSettings.startTime" 
          @change="onStartTimeChange"
          start="00:00"
          end="23:59"
        >
          <view class="picker-value">
            {{ workSettings.startTime }}
            <text class="picker-arrow">></text>
          </view>
        </picker>
      </view>

      <view class="setting-item">
        <view class="item-label">下班时间</view>
        <picker 
          mode="time" 
          :value="workSettings.endTime" 
          @change="onEndTimeChange"
          start="00:00"
          end="23:59"
        >
          <view class="picker-value">
            {{ workSettings.endTime }}
            <text class="picker-arrow">></text>
          </view>
        </picker>
      </view>

      <!-- 工作日设置 -->
      <view class="setting-item">
        <view class="item-label">工作日</view>
        <view class="weekday-selector">
          <view 
            v-for="(day, index) in weekdays" 
            :key="index"
            :class="['weekday-item', { active: isWorkday(index + 1) }]"
            @tap="toggleWorkday(index + 1)"
          >
            {{ day }}
          </view>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button" @tap="saveSettings">
      保存设置
    </view>

    <!-- 重置按钮 -->
    <view class="reset-button" @tap="resetSettings">
      重置默认
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import Taro from '@tarojs/taro'

export default {
  name: 'Profile',
  config: {
    navigationBarTitleText: '设置'
  },
  data() {
    return {
      salaryTypes: ['月薪', '时薪'],
      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
      defaultSettings: {
        startTime: '09:00',
        endTime: '18:00',
        salary: {
          type: 'monthly',
          amount: 10000
        },
        workdays: [1, 2, 3, 4, 5]
      }
    }
  },
  computed: {
    ...mapState({
      workSettings: state => state.workSettings
    })
  },
  methods: {
    onSalaryTypeChange(e) {
      const type = e.detail.value === '0' ? 'monthly' : 'hourly'
      // 转换金额
      let amount = this.workSettings.salary.amount
      if (type === 'hourly' && this.workSettings.salary.type === 'monthly') {
        amount = Math.round((amount / 22 / 8) * 100) / 100 // 转换为时薪
      } else if (type === 'monthly' && this.workSettings.salary.type === 'hourly') {
        amount = Math.round(amount * 8 * 22) // 转换为月薪
      }
      this.updateSettings({ 
        salary: { 
          type,
          amount
        } 
      })
    },
    onSalaryAmountChange(e) {
      const amount = parseFloat(e.detail.value) || 0
      this.updateSettings({ 
        salary: { 
          ...this.workSettings.salary,
          amount 
        } 
      })
    },
    onStartTimeChange(e) {
      this.updateSettings({ startTime: e.detail.value })
    },
    onEndTimeChange(e) {
      this.updateSettings({ endTime: e.detail.value })
    },
    isWorkday(day) {
      return this.workSettings.workdays.includes(day)
    },
    toggleWorkday(day) {
      const workdays = [...this.workSettings.workdays]
      const index = workdays.indexOf(day)
      if (index > -1) {
        // 确保至少保留一个工作日
        if (workdays.length > 1) {
          workdays.splice(index, 1)
        } else {
          Taro.showToast({
            title: '至少需要一个工作日',
            icon: 'none'
          })
          return
        }
      } else {
        workdays.push(day)
        workdays.sort((a, b) => a - b)
      }
      this.updateSettings({ workdays })
    },
    updateSettings(newSettings) {
      const settings = { ...this.workSettings, ...newSettings }
      this.$store.commit('updateWorkSettings', settings)
    },
    async saveSettings() {
      try {
        // 验证输入
        if (this.workSettings.salary.amount <= 0) {
          Taro.showToast({
            title: '请输入有效金额',
            icon: 'none'
          })
          return
        }

        // 验证时间
        const startTime = new Date(`2000/01/01 ${this.workSettings.startTime}`)
        const endTime = new Date(`2000/01/01 ${this.workSettings.endTime}`)
        if (endTime <= startTime) {
          Taro.showToast({
            title: '下班时间必须晚于上班时间',
            icon: 'none'
          })
          return
        }

        await this.$store.dispatch('saveSettings', this.workSettings)
        Taro.showToast({
          title: '保存成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('Save settings error:', error)
        Taro.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    },
    resetSettings() {
      Taro.showModal({
        title: '提示',
        content: '确定要重置所有设置吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.commit('updateWorkSettings', this.defaultSettings)
            this.saveSettings()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.profile {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;

  .settings-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 24px;
      color: #333;
    }

    .setting-item {
      margin-bottom: 24px;

      .item-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }

      .salary-input {
        width: 100%;
        height: 44px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 16px;
        background: #f8f9fa;
      }

      .picker-value {
        height: 44px;
        line-height: 44px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 16px;
        background: #f8f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .picker-arrow {
          color: #999;
          font-family: monospace;
        }
      }

      .weekday-selector {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;

        .weekday-item {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: #f8f9fa;
          font-size: 16px;
          color: #666;
          transition: all 0.3s;

          &.active {
            background: #6366f1;
            color: white;
          }

          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }

  .save-button {
    background: #6366f1;
    color: white;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    font-size: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);

    &:active {
      opacity: 0.9;
    }
  }

  .reset-button {
    background: #f8f9fa;
    color: #666;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    font-size: 16px;

    &:active {
      opacity: 0.8;
    }
  }
}
</style> 